<template>
  <view class="home-cell">
    <view class="top">
      <text class="title" v-text="title"></text>
      <u-icon name="arrow-down" color="#999999"></u-icon>
    </view>
    <view class="main">
      <view
        class="item"
        v-for="(item, index) in menu"
        :key="index"
        @click="goto(item)"
      >
        <image :src="item.src"></image>
        <text>{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'HomeCell',
  components: {},
  props: {
    title: {
      type: String | Number,
    },
    menu: {
      type: Array,
    },
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    goto(item) {
      uni.navigateTo({
        url: item.url,
        success(res) {
          // console.log(res)
        },
        fail(err) {
          console.log(err)
        },
      })
      console.log(item.name)
    },
  },
}
</script>

<style lang="scss">
.home-cell {
  background-color: #fff;
  border-radius: 8rpx;

  .top {
    display: flex;
    justify-content: space-between;
    padding: 24rpx 32rpx;

    .title {
      font-size: 14px;
      color: #202d41;
    }
  }

  .main {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(5, 110rpx);
    grid-gap: 28rpx;
    padding: 14rpx 34rpx;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      image {
        width: 96rpx;
        height: 96rpx;
      }

      text {
        margin-top: 8rpx;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}
</style>
